<template>
  <div class="IconManagement">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item><a>图标管理</a></el-breadcrumb-item>
    </el-breadcrumb>
    <main>
      <h2>系统图标</h2>
      <div class="icons">
        <div class="icon-row" v-for="ind in 4" :key="`row-${ind}`">
          <img
            v-for="iind in 10"
            :src="imgSrcs[(ind - 1) * 10 + iind - 1]"
            :key="`img-${ind}-${iind}`"
            alt="img"
            :class="`img-${ind}-${iind}`"
            width="46"
          />
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: "IconManagement",
  data() {
    return {
      imgSrcs: [],
    };
  },
  mounted() {
    for (let index = 1; index <= 40; index++) {
      this.imgSrcs.push(require('../../../assets/icons/icon' + index + '.svg'));
    }
  },
  methods: {},
};
</script>
<style lang="less" scoped>
.IconManagement {
  main {
    background-color: #fff;
    padding: 10px 20px;
    min-height: calc(100vh - 146px);
    h2 {
        font-size: 18px;
        font-weight: normal;
        margin-bottom: 20px;
    }
    .icon-row {
      display: flex;
      width: 100%;
      img {
        flex: 1;
        margin-right: 55px;
        margin-bottom: 24px;
        &:last-child {
            margin-right: 0;
        }
      }
    }
  }
}
</style>
